<template>
  <div class="fort">
    <div class="mui-card" v-for="(item,i) in gitesd" :key="item.id">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <mt-switch
            v-model="$store.getters.gotselect[item.id]"
            @change="hgcoster(item.id,$store.getters.gotselect[item.id])"
          ></mt-switch>
          <img :src="item.thumb_path" alt />
          <div class="info">
            <h3>{{item.title}}</h3>
            <p class="fortes">
              <span class="price">￥{{item.sell_price}}</span>
              <sddd :initcount="$store.getters.getnomber[item.id]" :goodsid="item.id"></sddd>
              <a href="#" @click="deletes(item.id,i)">删除</a>
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          总价：
          <div>
            <span>已选商品：{{$store.getters.getpacetate.vf}} 件</span>
            总价：￥{{$store.getters.getpacetate.tg}}
          </div>
          <button type="button" class="mui-btn mui-btn-danger">去结算</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import sddd from "./nuws/buttons";
export default {
  data() {
    return {
      gitesd: []
    };
  },
  created() {
    this.goddeshops();
  },
  methods: {
    goddeshops() {
      let ids = [];
      this.$store.state.car.forEach(item => ids.push(item.id));
      if (ids.length <= 0) {
        return console.log("空的");
      }
      fetch(
        "http://www.liulongbin.top:3005/api/goods/getshopcarlist/" +
          ids.join(",")
      )
        .then(res => {
          // console.log(res);
          if (res.status === 200) {
            return res.json();
          }
        })
        .then(data => {
          // console.log(data);
          this.gitesd = data.message;
        });
    },
    deletes(id, i) {
      this.gitesd.splice(i, 1);
      this.$store.commit("fvcgetid", id);
    },
    hgcoster(id, val) {
      this.$store.commit("googote", { id, selected: val });
    }
  },
  components: {
    sddd
  }
};
</script>
<style lang="less" scoped>
.fort {
  .mui-card-content-inner {
    display: flex;
    align-items: center;
  }
  img {
    width: 60px;
  }
  h3 {
    font-size: 13px;
  }
  .info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    p {
      line-height: 35px;
      .price {
        color: red;
        font-weight: bold;
        float: left;
      }
      div {
        float: left;
        // width: 120px;
      }
    }
  }
}
</style>
